<template>
<!--  <h1>接收：{{this.$route.query.id}}</h1>-->
  <div>
    <van-nav-bar
        title="酒店详细信息"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>
  <div style="width: 100%;height: 50%">
    <van-image
        class="img1"
        :src="this.hous.imgurl"
    />
  </div>
  <div class="dv1"  >
    <van-steps direction="vertical" v-model:active="active">
      <van-step>
        <h3 style="margin-right: 250px">酒店名字：</h3>
        <p>{{hous.housname}}</p>
      </van-step>
      <van-step>
        <h3 style="margin-right: 250px">酒店类型：</h3>
        <p>{{ hous.houstype }}</p>
      </van-step>
      <van-step>
        <h3 style="margin-right: 250px">酒店价格：</h3>
        <p>{{ hous.housprice }}元</p>
      </van-step>
      <van-step>
        <h3 style="margin-right: 250px">酒店详情：</h3>
        <p>{{ hous.info }}</p>
      </van-step>
    </van-steps>
  </div>


  <div style="width: 100%;">
    <div style="float: left;margin-left: 50px;margin-bottom: 10px ;width: 50%;position: fixed" >
    <van-submit-bar :price="hous.housprice2" button-text="去支付" button-color="#1989fa" @submit="onSubmit" @click="topay()">
      <template #tip STYLE="background-color:chartreuse ">快去完善信息吧！
      </template>
    </van-submit-bar>
  </div>
  <div style="margin-bottom: -100px ;" >
    <van-cell title="选择预定时间" :value="date"  @click="show = true" style="font-style: v-bind(show)" />
    <van-calendar v-model:show="show" type="range" color="#ad0000" @confirm="onConfirm" @click="day()"/>
  </div>
  </div>
  <van-popup  position="top" :style="{ height: '10%' } ">
    <van-row >
      <van-field type="text" v-model="datestart" />
      <van-field type="text" v-model="dateend" />
      <van-field type="text" v-model="this.hous.days" />
    </van-row>
  </van-popup>
</template>

<script>
import {Toast} from "vant";
import { createApp } from 'vue';
import { SubmitBar } from 'vant';
import { ref } from 'vue';

const app = createApp();
app.use(SubmitBar);
export default {
  name: "HousPayView",
  data() {
    const date = ref('');
    const show = ref(false);
    const datestart = ref('');
    const dateend = ref('');
    const formatDate = (date) => `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate()}`;
    const onConfirm = (values) => {
      const [start, end] = values;
      show.value = false;
      date.value = `${formatDate(start)} - ${formatDate(end)}`;
      datestart.value=formatDate(start);
      dateend.value=formatDate(end);
    };
    const onCancel = () => Toast('取消');
    return {
      date,
      show,
      datestart,
      dateend,
      iDays:1,
      onConfirm,
      active:0,
      money:1,
      hous:{
          id:"",
          housname:"",
          houstype:"",
          housprice:"",
          housprice1:"",
          housprice2:"0",
          days:1,
          info:'',
          imgurl: ""
      },houspay:{
        id:"",
        housname:"",
        token:"",
        money:"",
      },
        value:"",
      onCancel,
    };
  },mounted() {

    //请求接口
    this.axios.get("/api/housinfo/info.do?id="+this.$route.query.id).then(r=>{
      if(r.data.code==200){
        this.hous=r.data.data;
        this.hous.housprice2=r.data.data.housprice*100;
        this.hous.housprice1=r.data.data.housprice*100;
        this.houspay.id=r.data.data.id;
        this.houspay.housname=r.data.data.housname;
        this.houspay.token=this.$store.state.token;
        this.houspay.money=r.data.data.housprice;
      }
    })
  }
  ,methods:{
    back(){
      history.back();
    },day(){
      let dateSpan,iDays,datestart,dateend
      datestart = Date.parse(this.datestart)
      dateend = Date.parse(this.dateend)
      dateSpan = dateend - datestart
      dateSpan = Math.abs(dateSpan)
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
      this.hous.days=iDays;
      this.hous.housprice2=this.hous.housprice1*iDays;
    },topay(){
      this.$router.push({path:"/reserve",query:{id:this.houspay.id,token:this.houspay.token,money:this.houspay.money,housname:this.houspay.housname,imgurl:this.hous.imgurl}});
    }
  }
}
</script>

<style scoped>
.img1{
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
</style>